<template>
    <fieldset>
        <legend>modal封装</legend>
        <modals :visible="visible" @on-cancle="cancle" @on-confirm="confirm">
            <!-- 具名插槽可以动态改变内容:slot -->
            <template v-slot:title>
                <h1>model提示</h1>
            </template>
            <template v-slot:body>
                <h1>model提示内容</h1>
            </template>
        </modals>
        <button @click="showModal">点击显示模态框</button>
    </fieldset>
</template>
<script>
// import modals from "../../modals"
import modalMix from "../../mixins/modal"
export default{
    mixins: [modalMix]

    // 封装到mixins的modal.js中
    // components: {
    //     modals,
    // },
    // data(){
    //     return{
    //         visible:false,
    //     }
    // },
    // methods:{
    //     showModal(){
    //         this.visible=true;
    //     },
    //     cancle(){
    //         // 取消按钮触发的事件
    //         this.visible=false;
    //         alert("确定取消")
    //     },
    //     confirm(){
    //         // 确定按钮触发的事件
    //         this.visible=false;
    //         alert("传输完成")
    //     }
    // }
}
</script>